<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/history.js"></script>

</head>
<body>
<a class="ajax" href="./cart.html">My Link</a>
<a class="ajax" href="./index.html">Other Link</a>
    <script type="text/javascript">
            $(function() {
                // we get a normal Location object

                /*
                 * Note, this is the only difference when using this library,
                 * because the object window.location cannot be overriden,
                 * so library the returns generated "location" object within
                 * an object window.history, so get it out of "history.location".
                 * For browsers supporting "history.pushState" get generated
                 * object "location" with the usual "window.location".
                 */
                var location = window.history.location || window.location;

                // looking for all the links and hang on the event, all references in this document
                $(document).on('click', 'a.ajax', function() {
                    if(this.href.indexOf('buy') < 0){
                        history.pushState(null, null, this.href);
                    }

                });

                // hang on popstate event triggered by pressing back/forward in browser
                $(window).on('popstate', function(e) {
                    alert("We returned to the page with a link: " + location.href);
                });
            });
</script>

</body>
</html>